<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>验证框示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js" ></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
</head>
<body>
	<h2>数字验证框</h2>
	<h3>说明:</h3>
    <span>数字验证框（numberbox）用来验证数字表单，在输入框上加入简单的验证 。</span>
	<h3>如：</h3>
	<style>td{
		padding:5px 0;
	}</style>
	<div class="demo-exp-code entry-content"> 
		<div class="hisui-panel use-prettyprint" title="登记" style="width:400px;padding:10px 10px 10px 10px" data-options="iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true,headerCls:'panel-header-gray'">
			<table>
			<tbody>
				<tr>
					<td class="r-label"><span style="line-height: 14px;vertical-align: top;display: inline-block;">温度</span></td>
					<td class="r-label">
						<input class="hisui-numberbox textbox" data-options="placeholder:'输入35到42间的数字',precision:2,forcePrecisionZoer:false,fix:false,max:42,min:35">
					</td>
					<td></td>
				</tr>
				<tr>
					<td class="r-label"><span style="line-height: 14px;vertical-align: top;display: inline-block;">数字</span></td>
					<td class="r-label">
						<input class="hisui-numberbox textbox" data-options="isKeyupChange:true" id="nb">
					</td>
					<td>值即时变化</td>
				</tr>
			</tbody>
			</table>
		</div>
		<script type="text/javascript"  class="use-prettyprint">
			$(function(){
				$("#nb").on('keyup',function(e){
					console.log("numberbox value = "+$(this).numberbox('getValue'));
					if (e.keyCode==13){
						console.log("numberbox value enterkey ="+$(this).numberbox('getValue'));
					}
				});
			})
		</script>
	</div>
	<table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>isKeyupChange</td>
			<td>默认值false</td>
			<td>值为false时blur时改变组件的值。为true时则keyup时改变组件的值<code>2019-4-18</code></td>
			<td></td>
		</tr>
		<tr>
			<td>fix</td>
			<td>默认值true</td>
			<td>true时强制转换值为min或max，值为false时只给出提示<code>2020-1-21</code></td>
			<td></td>
		</tr>
		<tr>
			<td>forcePrecisionZoer</td>
			<td>默认值true</td>
			<td>true强制按有效数字配置补齐,false时不强制补0<code>2022-5-22</code></td>
			<td></td>
		</tr>
	</table>
	<prettyprint/>	
</body>
</html>